<!--
/**
* Author: gaohui
* Date: 2023-03-01 10:47
* Desc: TextComp 文本组件
*/
-->

<template>
  <div>传入的文本： {{ str }}</div>
  <div class="mt20">
    <el-button @click.stop="handleClick">触发emit</el-button>
  </div>
</template>

<script name="TextComp" lang="ts" setup>
import { ref } from "vue";
import { showMessage } from "@/utils/msgUtil";
// defineProps无需从vue引入
defineProps({
  str: {
    type: String,
  },
});

// defineEmits无需从vue引入
const emits = defineEmits(["change-value"]);
const clickEmitNum = ref(0);
const handleClick = () => {
  clickEmitNum.value += 1;
  emits("change-value", "hello-" + clickEmitNum.value);
};

// defineExpose无需从vue引入
const disposeStr = "这是一段组件暴露出的文本";
const disposeFn = (val: string) => {
  showMessage("您触发了组件下暴露的方法,传入值为：" + val);
};
defineExpose({
  disposeStr,
  disposeFn,
});
</script>
<style lang="scss" scoped></style>
